import React, { useState, useEffect, useRef } from 'react';
import TopBar from '../TopBar/TopBar';
import { searchresult, recommend } from '../../assets/api/search';
import './Search.css'
import { message } from 'antd';

export default function Search(props) {
    const ip = useRef();
    const [historylist, sethistorylist] = useState([]);
    const [recommendlist, setrecommendlist] = useState([]);
    const [loading, setLoading] = useState(false);
    const [nextpage, setnextpage] = useState("");
    const [searchkey, setsearchkey] = useState("");
    const [searchresultlist, setsearchresultlist] = useState([]);
    useEffect(() => {
        if (props.searchbottom === 0) {
            loadmore();
        }
    }, [props.searchbottom]);
    useEffect(() => {
        recommend().then(data => {
            console.log(data);
            setrecommendlist(data.list);
        })

    }, []);


    function loadmore() {
        if (loading) {
            return;
        }
        setLoading(true);
        message.loading(
            {
                key: 1,
                content: <span>加载中</span>,
                className: "toast",
                duration: 0,
            }
        )
        console.log(nextpage);
        searchresult({ keyword: searchkey, page: nextpage }).then(data => {
            console.log(data);


            searchresultlist.push(...data.data.books);
            setsearchresultlist(searchresultlist);
            setnextpage(nextpage + 1);
            message.destroy(1);
            setLoading(false);
        })
    }
    function thirdsearch(key = null) {
        let newkey = key;
        if (newkey != null) {
            setsearchkey(newkey);
        } else {
            newkey = searchkey
        }
        ip.current.blur();
        message.loading(
            {
                key: 1,
                content: <span>加载中</span>,
                className: "toast",
                duration: 0,
            }
        )
        searchresult({ keyword: newkey, page: 1 }).then(data => {
            message.destroy(1);
            console.log(historylist);
            historylist.forEach((ele, index) => {
                if (ele === newkey) {
                    historylist.splice(index, 1);
                }
            })
            historylist.unshift(newkey);
            sethistorylist(historylist);
            console.log(data);
            setnextpage(2);
            setsearchresultlist(data.data.books);
        })
    }
    function beginsearch(e) {

        if (e.keyCode === 13) {
            thirdsearch();
        }

    }
    return (
        <div className={'searchbox ' + (props.show ? "show" : "")}>
            <TopBar ip={ip} beginsearch={beginsearch} searchkey={searchkey} setsearchkey={setsearchkey} back={props.hidesearch} />
            <div className="searchbottom">
                {
                    searchkey !== "" ? (searchresultlist.length === 0) ? <div className='nothing'>无更多搜索结果</div> : searchresultlist.map((ele, index) =>
                        <div key={index} className="searchresultminbox" onClick={() => props.changebooksid(ele.bookId)}>
                            <div className="face">
                                <img src={ele.cover} alt="" />
                            </div>
                            <div className="searchresultcontent">
                                <div className="contenttitle">
                                    {ele.title}
                                </div>
                                <div className="contenauthor">
                                    {ele.author}
                                </div>
                            </div>
                        </div>
                    ) :
                        <>
                            <div className='recommendsearch'>
                                {
                                    historylist.length === 0 ? <></> : <>
                                        历史搜索
                                        <div className="flexbox">
                                            {
                                                historylist.map((ele, index) => (
                                                    <div key={index} onClick={() => thirdsearch(ele)} className='recommendsearchminbox'>
                                                        {ele}
                                                    </div>

                                                ))
                                            }
                                        </div>
                                    </>
                                }



                            </div>
                            <div className='recommendsearch'>
                                推荐搜索
                                <div className="flexbox">
                                    {
                                        recommendlist.map((ele, index) => (
                                            <div key={index} onClick={() => thirdsearch(ele.name)} className='recommendsearchminbox'>
                                                {ele.name}
                                            </div>

                                        ))
                                    }
                                </div>


                            </div>
                        </>


                }
            </div>
        </div>
    );
}
